<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>邮件发送</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" th:href="@{/plugins/layui/css/layui.css}"/>
</head>
<body>
<!-- 模块名 -->
<div class="layui-container" style="width: 100%;">
    <div class="layui-row">
        <div class="layui-col-md12">
            <!-- 模块名 -->
            <blockquote class="layui-elem-quote" style="border-left: 5px solid #3385FF;">邮件发送</blockquote>
            <div class="layui-tab layui-tab-brief">
                <ul class="layui-tab-title">
                    <li class="layui-this">发送文本</li>
                    <li>发送HTML</li>
                    <li>发送附件+文本</li>
                    <li>Freemarker模板发送</li>
                </ul>
                <div class="layui-tab-content" style="height: 100px;">
                    <!--发送文本-->
                    <div class="layui-tab-item layui-show">
                        <form class="layui-form layui-form-pane" id="sendTextForm">
                            <div class="layui-form-item">
                                <label class="layui-form-label">发件人</label>
                                <div class="layui-input-block">
                                    <input type="text" name="sender" lay-verify="required" placeholder="请输入接收人"
                                           autocomplete="off" th:value="${sender}" readonly class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">邮件主题</label>
                                <div class="layui-input-block">
                                    <input type="text" name="subject" lay-verify="required" placeholder="请输入邮件主题"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">接收人</label>
                                <div class="layui-input-block">
                                    <input type="text" name="receiver" lay-verify="required"
                                           placeholder="请输入接收人,多个接收人用;隔开"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">内容</label>
                                <div class="layui-input-block">
                                    <textarea placeholder="请输入内容" name="content" class="layui-textarea"
                                              lay-verify="required"></textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <button class="layui-btn layui-btn-normal" lay-submit type="button"
                                        onclick="MAIL.sendText()"
                                        lay-filter="sendText">提交
                                </button>
                            </div>
                        </form>
                    </div>
                    <!--发送HTML-->
                    <div class="layui-tab-item">
                        <form class="layui-form layui-form-pane" id="sendHTMLForm">
                            <div class="layui-form-item">
                                <label class="layui-form-label">发件人</label>
                                <div class="layui-input-block">
                                    <input type="text" name="sender" lay-verify="required" placeholder="请输入接收人"
                                           autocomplete="off" th:value="${sender}" readonly class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">邮件主题</label>
                                <div class="layui-input-block">
                                    <input type="text" name="subject" lay-verify="required" placeholder="请输入邮件主题"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">接收人</label>
                                <div class="layui-input-block">
                                    <input type="text" name="receiver" lay-verify="required"
                                           placeholder="请输入接收人,多个接收人用;隔开"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">HTML片段</label>
                                <div class="layui-input-block">
                                    <textarea placeholder="请输入HTML片段" name="content" class="layui-textarea"
                                              lay-verify="required"></textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <button class="layui-btn layui-btn-normal" lay-submit type="button"
                                        onclick="MAIL.sendHTML()"
                                        lay-filter="sendHTML">提交
                                </button>
                            </div>
                        </form>
                    </div>
                    <!--发送附件+文本-->
                    <div class="layui-tab-item">
                        <form class="layui-form layui-form-pane"
                              id="sendTextFileForm">
                            <div class="layui-form-item">
                                <label class="layui-form-label">发件人</label>
                                <div class="layui-input-block">
                                    <input type="text" name="sender" lay-verify="required" th:value="${sender}" readonly
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">邮件主题</label>
                                <div class="layui-input-block">
                                    <input type="text" name="subject" lay-verify="required" placeholder="请输入邮件主题"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">接收人</label>
                                <div class="layui-input-block">
                                    <input type="text" name="receiver" lay-verify="required"
                                           placeholder="请输入接收人,多个接收人用;隔开"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-btn-container">
                                <input type="file" class="layui-btn layui-btn-normal" id="file">选择文件</input>
                            </div>
                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">内容</label>
                                <div class="layui-input-block">
                                    <textarea placeholder="请输入内容" name="content" lay-verify="required"
                                              class="layui-textarea"></textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <button class="layui-btn layui-btn-normal" lay-submit type="button"
                                        lay-filter="sendTextFile" id="sendTextFile" onclick="MAIL.sendFileAndText()">提交
                                </button>
                            </div>
                        </form>
                    </div>
                    <!--Freemarker模板发送-->
                    <div class="layui-tab-item">
                        <form class="layui-form layui-form-pane" id="sendFreemakerForm">
                            <div class="layui-form-item">
                                <label class="layui-form-label">发件人</label>
                                <div class="layui-input-block">
                                    <input type="text" name="sender" lay-verify="required" th:value="${sender}" readonly
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">邮件主题</label>
                                <div class="layui-input-block">
                                    <input type="text" name="subject" lay-verify="required" placeholder="请输入邮件主题"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">接收人</label>
                                <div class="layui-input-block">
                                    <input type="text" name="receiver" lay-verify="required" placeholder="请输入接收人"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">员工姓名</label>
                                <div class="layui-input-block">
                                    <input type="text" name="name" lay-verify="required" placeholder="请输入员工姓名"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">工号</label>
                                <div class="layui-input-block">
                                    <input type="text" name="num" lay-verify="required" placeholder="请输入工号"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">薪资</label>
                                <div class="layui-input-block">
                                    <input type="text" name="salary" lay-verify="required" placeholder="请输入薪资"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <button class="layui-btn layui-btn-normal" lay-submit type="button"
                                        lay-filter="sendFreemarkerTemplate" onclick="MAIL.sendFreemarkerTemplate()">提交
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<!--引入js文件-->
<script type="text/javascript" th:src="@{/plugins/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/javascript/jquery-2.1.4.js}"></script>
<script>
    var element = null;
    var form = null;
    var upload = null;

    $(() => {
        LayUi.initLayui();
    })

    var LayUi = {
        /**
         * 初始化Layui
         */
        initLayui: () => {
            layui.use(['element', 'form', 'upload'], function () {
                //Tab的切换功能，切换事件监听等，需要依赖element模块
                element = layui.element;
                form = layui.form;
                upload = layui.upload;

                //多图片上传
                upload.render({
                    elem: '#test2'
                    , url: '/mail/sendImgResMail' //改成您自己的上传接口
                    , multiple: true
                    , auto: false
                    , bindAction: '#sendTextFile'
                    , before: function (obj) {
                        this.data.subject = $('#subject').val();
                        this.data.recipientStr = $('#recipientStr').val();
                        this.data.obj = $('#obj').val();
                    }
                    , field: 'frontEndFiles'
                    , choose: function (obj) {
                        //预读本地文件示例，不支持ie8
                        obj.preview(function (index, file, result) {
                            $('#demo2').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img" style="width: 200px;height: 200px;margin-left: 5px">')
                        });
                    }
                    , done: function (res) {
                        //上传完毕
                    }
                });
            })
        }
    }


    /**
     * 邮件发送相关
     */
    var MAIL = {

        /**
         * 发送文本
         */
        sendText: () => {
            form.on('submit(sendText)', function (data) {
                var obj = data.field;
                var index = layer.load();
                jsonPost('/mail/sendText', obj, res => {
                    layer.close(index)
                    if (res.flag == true) {
                        layer.msg(res.msg, {icon: 1, time: 1500},()=>{
                            $('#sendTextForm')[0].reset();
                        });
                    } else {
                        layer.msg(res.msg, {icon: 5, time: 1500});
                    }
                }, error => {
                    console.error('邮件发送异常', error)
                    layer.msg('邮件发送异常', {icon: 5, time: 1500});
                })
            });
        },
        /**
         * 发送HTML片段
         */
        sendHTML:()=>{
            form.on('submit(sendHTML)', function (data) {
                var obj = data.field;
                var index = layer.load();
                jsonPost('/mail/sendHTML', obj, res => {
                    layer.close(index)
                    if (res.flag == true) {
                        layer.msg(res.msg, {icon: 1, time: 1500},()=>{
                            $('#sendHTMLForm')[0].reset();
                        });
                    } else {
                        layer.msg(res.msg, {icon: 5, time: 1500});
                    }
                }, error => {
                    console.error('邮件发送异常', error)
                    layer.msg('邮件发送异常', {icon: 5, time: 1500});
                })
            });
        },
        /**
         * 发送附件+文本
         */
        sendFileAndText: () => {
            form.on('submit(sendTextFile)', function (data) {
                var index = layer.load();
                var formdata = new FormData();
                formdata.append('multipartFile', $('#file')[0].files[0]);
                formdata.append('subject', data.field.subject);
                formdata.append('sender', data.field.sender);
                formdata.append('receiver', data.field.receiver);
                formdata.append('content', data.field.content);
                var url = '/mail/sendFile'
                uploadPost(url, formdata, res => {
                    layer.close(index)
                    if (res.flag == true) {
                        layer.msg(res.msg, {icon: 1, time: 1500},()=>{
                            $('#sendTextFileForm')[0].reset();
                            $('#file').val();
                        });

                    } else {
                        layer.msg(res.msg, {icon: 5, time: 1500});
                    }
                }, error => {
                    console.error('邮件发送异常', error)
                    layer.msg('邮件发送异常', {icon: 5, time: 1500});
                })
            })
        },
        /**
         * Freemarker模板发送
         */
        sendFreemarkerTemplate: () => {
            form.on('submit(sendFreemarkerTemplate)', function (data) {
                var url = '/mail/sendFreemarkerMail'
                var index = layer.load();
                post(url, data.field, res => {
                    layer.close(index)
                    if (res.flag == true) {
                        layer.msg(res.msg, {icon: 1, time: 1500},function (){
                            $('#sendFreemakerForm')[0].reset();
                        });
                    } else {
                        layer.msg(res.msg, {icon: 5, time: 1500});
                    }
                }, error => {
                    console.error('邮件发送异常', error)
                    layer.msg('邮件发送异常', {icon: 5, time: 1500});
                })
            })
            return false;
        }
    }

    function uploadPost(url, data, success, error){
        $.ajax({
            url: url,
            dataType: 'json',
            type: 'post',
            data: data,
            cache:false,
            processData: false,
            contentType: false,
            success: success,
            error: error
        })
    }

    function post(url, data, success, error) {
        $.ajax({
            url: url,
            dataType: 'json',
            type: 'post',
            data: data,
            success: success,
            error: error
        })
    }

    function jsonPost(url, data, success, error) {
        $.ajax({
            url: url,
            dataType: 'json',
            type: 'post',
            data: JSON.stringify(data),
            contentType: 'application/json',
            success: success,
            error: error
        })
    }
</script>
</html>